<template>
    <div id="revenueoption">
        <el-container style="border: 1px solid #eee; position: relative;border-radius: 2px">
            <el-aside width="150px" style="border-right: 1px solid #eee;">
                <div style="display:flex;flex-wrap: wrap;width: 100%;height: auto">
                    <template v-for="(item) in initEventGroup">
                        <el-row class="optionGroupAside"
                                :key="item.id"
                                :class="{currentItemBoxParent:isCurrentEventParent(item)}"
                                @click.native="scrollToPlace(item.title)">
                            <el-col :span="2" v-if="isCurrentEventParent(item)" class="optionGroupItemSelectedHead">
                            </el-col>
                            <el-col :span="2" v-else>
                            </el-col>

                            <el-col :span="15">{{item.groupName}}</el-col>
                            <el-col :span="7" v-if="isCurrentEventParent(item)">
                                <div class="optionGroupItemSelected">{{item.mateEventList.length}}</div>
                            </el-col>
                            <el-col :span="7" v-else>
                                <div class="optionGroupItemNoSelected">{{item.mateEventList.length}}</div>
                            </el-col>

                            <!--                            <el-button v-if="isCurrentEventParent(item)" type="success" round size="mini">{{item.mateEventList.length}}</el-button>-->
                            <!--                            <el-button v-else type="info" round size="mini">{{item.mateEventList.length}}</el-button>-->
                        </el-row>
                    </template>
                </div>
            </el-aside>

            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="16">
                            <el-input class="paperview-input-text" placeholder="请输入搜索内容"
                                      prefix-icon="el-icon-search"
                                      v-model="currentSearchValue" size="small"></el-input>
                        </el-col>
                        <el-col :span="3"></el-col>
                        <el-col :span="5">
                            <el-divider direction="vertical"></el-divider>
                            <span style="color:#3CD2A9" @click="choScreenOptionsEvent()">筛选</span>
                            <el-divider direction="vertical"></el-divider>
                            <el-dropdown>
                                <i class="el-icon-setting" style="margin-right: 15px"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>查看</el-dropdown-item>
                                    <el-dropdown-item>新增</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </el-header>
                <el-divider class="el-divider_header"></el-divider>

                <el-main id="el_main_" style="width: 500px;position: relative">
                    <div class="initEventContentBox">
                        <template v-for="(item,index) in groupToDetailListNames.names.length">
                            <div :id="groupToDetailListNames.names[index]"></div>

                            <template
                                    v-if="(currentSearchValue===''&&currentSearchValueGroupEventIds==='')||currentSearchValueGroupEventIds.indexOf(groupToDetailListNames.ids[index]+',')>-1">
                                <el-row class="selectOptionsContentRows" :key="item">
                                    <el-col :span="1" style="height: 100%">
                                        <div style="width: 3px;height: 18px;margin-top: 6px;background-color: #04cb94"></div>
                                    </el-col>
                                    <el-col :span="23"
                                            style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                                        <div>{{groupToDetailListNames.names[index]}}</div>
                                        <div style="flex:1 0 auto;background:#e9f0f7;height:1px"></div>
                                    </el-col>
                                </el-row>
                            </template>


                            <template v-for="(detailItem,detailIndex) in groupToDetailList[index].length">
                                <div :id="groupToDetailList[index][detailIndex].id"
                                     class="grid-content"
                                     style="height: 30px;line-height: 30px ;font-size: small;cursor: pointer;padding-left: 10px"
                                     v-if="groupToDetailList[index][detailIndex].cname.indexOf(currentSearchValue) > -1"
                                     @click="selectEvent(index,detailIndex)"
                                     v-bind:class="{currentItemBox:groupToDetailList[index][detailIndex].id===currentEvent.id}"
                                     :key="detailItem.id">
                                    {{groupToDetailList[index][detailIndex].cname}}
                                </div>
                            </template>

                        </template>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    export default {
        props: {
            /* 用户分组详情组件*/
            initEventGroupDetail: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            /* 用户分组组件*/
            initEventGroup: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            /* 是页面第几个控件 List的时候使用*/
            origin: {
                type: Number,
                default: () => {
                    return {};
                }
            },
            /* 父级当前选中控件*/
            currentEvent: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        components: {
            /* 自定义的筛选框 暂时未完成*/
        },
        data() {
            return {
                /* 当前搜索的名字*/
                currentSearchValue: "",
                /* 自定义的筛选框是否展示 暂时未完成*/
                showScreenEventGroup: false,
                /* 当前搜索的名字对应的群组Id*/
                currentSearchValueGroupEventIds: "",
                /* 最近使用事件数组*/
                // virtualEventGroup: [],
                /* 组别对应的详情数组 --- 数据*/
                groupToDetailList: [],
                /* 组别对应的详情数组 --- 名字 与 id*/
                groupToDetailListNames: {names: [], ids: []}

            }
        },
        watch: {
            /* 搜索时添加当前类别Id 用于区分*/
            currentSearchValue: function (newval, oldval) {
                this.currentSearchValueGroupEventIds = "";
                if (newval !== "") {
                    for (let i = 0; i < this.initEventGroup.length; i++) {
                        for (let j = 0; j < this.initEventGroup[i].mateEventList.length; j++) {
                            for (let k = 0; k < this.initEventGroupDetail.length; k++) {
                                if (this.initEventGroupDetail[k].cname.indexOf(newval) > -1) {
                                    if (this.initEventGroupDetail[k].eventId === this.initEventGroup[i].mateEventList[j].eventId) {
                                        this.currentSearchValueGroupEventIds += this.initEventGroup[i].eventId + ",";
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        methods: {
            scrollToPlace(title, isItem) {
                    if (isItem === true) {
                    document.getElementById("el_main_").scrollTop = document.getElementById(title).offsetTop - 100;
                    } else {
                    document.getElementById("el_main_").scrollTop = document.getElementById(title).offsetTop;
                    }

            },
            /* 判断是否是当前选中对象的父级 */
            isCurrentEventParent(parentObj) {
                let isParent = false;
                for (let i = 0; i < parentObj.mateEventList.length; i++) {
                    if (parentObj.mateEventList[i].eventId === this.currentEvent.eventId) {
                        isParent = true;
                    }
                }
                return isParent;
            },
            choScreenOptionsEvent() {
                this.showScreenEventGroup = !this.showScreenEventGroup;
            },
            /* 选择事件 */
            selectEvent(index, detailIndex) {
                this.$emit("choInitEventEnd", {mes: this.groupToDetailList[index][detailIndex], origin: this.origin})
            },
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
            this.$nextTick(() => {
                // 组合群组对应的子项
                for (let j = 0; j < this.initEventGroup.length; j++) {
                    let item = [];
                    for (let k = 0; k < this.initEventGroup[j].mateEventList.length; k++) {
                        for (let m = 0; m < this.initEventGroupDetail.length; m++) {
                            if (this.initEventGroupDetail[m].eventId === this.initEventGroup[j].mateEventList[k].eventId) {
                                item.push(this.initEventGroupDetail[m]);
                            }
                        }
                    }

                    this.groupToDetailListNames.names.push(this.initEventGroup[j].groupName)
                    this.groupToDetailListNames.ids.push(this.initEventGroup[j].id)
                    this.groupToDetailList.push(item);
                }

                //页面定位到当前选中事件
                this.$nextTick(() => {
                    let name = "";
                    if (this.currentEvent.id !== undefined) {
                        this.scrollToPlace(this.currentEvent.id, true);
                    }
                })

                this.$forceUpdate();
            });


        },
        computed: {}
    }
</script>

<style scoped lang="scss">

    .optionGroupAside {
        height: 36px;
        line-height: 36px;
        width: 100%;
        font-size: small;
        cursor: pointer;

        .el-col {
            border-radius: 0px;
        }

        &:hover {
            background-color: #f1fcfc;
        }
    }

    .selectOptionsContentRows {
        height: 30px;
        width: 100%;
        padding: 0px 0px 0px 0px;
    }

    .optionGroupItemSelectedHead {
        border-left: 3px solid #00bf8a;
    }

    .optionGroupItemSelected {
        line-height: 18px;
        margin-top: 10px;
        border-radius: 10px;
        background-color: #04cb94;
        width: 30px;
        height: 18px;
        color: #ffffff;
        text-align: center;
    }

    .optionGroupItemNoSelected {
        line-height: 18px;
        margin-top: 10px;
        border-radius: 10px;
        background-color: #e6e6e6;
        width: 30px;
        height: 18px;
        color: #5a5a5a;
        text-align: center;
    }

    .el-row {
        display: flex;
        flex-wrap: wrap
    }

    .initEventContentBox {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start; //解决问题的样式
    }

    .currentItemBox {
        background-color: #0ACC97;
        color: #ffffff !important;
    }

    .currentItemBoxParent {
        background-color: #e4f9f9;
        color: #06C18D !important;
    }


    .el-header {
        padding: 0px;
        background-color: #ffffff;
        color: #333;
        line-height: 40px;
        height: 40px !important;
    }

    .paperview-input-text {
        ::v-deep .el-input__inner {
            border: none;
        }
    }

    .el-main {
        background-color: #ffffff;
    }


    #revenueoption {
        margin-top: 4px;
        height: 400px;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //设置两层阴影
        position: absolute;
        left: -1px;
        top: 100%;
        z-index: 99;
        display: flex;
        flex-direction: column; //纵向排列
    }


    .el-col {
        border-radius: 4px;
    }


    .grid-content {
        color: #1f2f3d;
        width: 210px;
        border-radius: 4px;
        box-sizing: border-box;
        text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
        white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
        overflow: hidden; /*超出部分隐藏*/
        &:not(.currentItemBox) {
            &:hover {
                background-color: #EDFAF7 !important;
            }
        }
    }

    .el-divider_header {
        margin-top: 1px !important;
        margin-bottom: 5px !important;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #ffffff;
    }


</style>
